<template>
  <div class="publish">
    <div class="top">
      <ul>
        <li class="iconfont icon-xiaobiaoqian-shanchu"></li>
        <li>说说</li>
        <li>
          <i class="iconfont icon-15-fasong" @click="send"></i>
        </li>
      </ul>
    </div>
    <div class="content">
      <textarea name id cols="30" rows="10" placeholder="你要发表的动态..." v-model="talkData.content"></textarea>
    </div>
    <div class="upImg">
      <div class="up" v-if="!talkData.imgUrl">
        <img :src="require('assets/img/tianjia.png')" alt />
        <input type="file" name="file" ref="upImg" v-on:change="upImg"/>
      </div>
      <img class="showImg" width="90%" v-else :src="`http://localhost:3000${talkData.imgUrl}`" alt="">
      <div class="exhibition"></div>
    </div>
  </div>
</template>

<script>
import {upFile} from "ulit/upFile" //上传文件方法
import { upData } from "request/upData";//上传文件方法
import {upDynamic} from "request/dynamic"//发布说说接口
import {parseCookie} from "ulit/parse"//解析cookie
import {skip} from "ulit/skipRouter" 
export default {
  name: "publish",
  data() {
    return {
      talkData:{
        use_id:'',
        content:'',
        imgUrl:'',
      },
    };
  },
  methods:{
    upImg(){
      var data=upFile(this.$refs.upImg)
      upData(data).then(res=>{
        this.$set(this.talkData,'imgUrl',res.data.path)
      })
    },
    send(){
      upDynamic(this.talkData).then(res=>{
        if(res.data.status){
          alert(res.data.lay)
          skip(this,'dynamic')
        }else{
          alert(res.data.err)
        }
        
      })
    }
  },
  mounted(){
    this.$set(this.talkData,'use_id',parseCookie())
  }
};
</script>

<style lang="less" scoped>
.publish {
  .top {
    ul {
      box-sizing: border-box;
      padding: 0.5rem;
      display: flex;
      list-style: none;
      justify-content: space-between;
      box-shadow: -1px 0px 12px #888888;
      li {
        line-height: 2rem;
        font-size: 1.5rem;
        font-family: "Courier New", Courier, monospace;
        i {
          font-size: 2rem;
        }
      }
    }
  }
  .content {
    textarea {
      width: 90%;
      min-height: 2rem;
      margin: 0.5rem auto;
      display: block;
      border: none;
    }
    textarea:focus {
      outline: none;
      font-family: "Courier New", Courier, monospace;
      font-size: 1.2rem;
      letter-spacing: 0.1rem;
    }
  }
  .upImg {
    .up {
      position: relative;
      img {
        width: 50%;
        display: block;
        margin: 0 auto;
      }
      input{
        top: 0;
        width: 50%;
        opacity: 0;
        height: 13rem;
        left: 25%;
        position:absolute;
      }
    }
    .showImg{
      display: block;
      margin: 0 auto;
    }
  }
}
</style>